<template>
  <div>
    <div class="info_tab_boxssss">
      <tab
        v-if="tabArr.length>0"
        :line-width="2"
        custom-bar-width="30px"
      >
        <tab-item
          :selected="index === active"
          v-for="(item,index) in tabArr"
          :key="index"
          @on-item-click="tabIndex"
        >{{item.title}}</tab-item>
      </tab>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item,index) in tabArr"
          :key="index"
          :style="`height:${WinHeight}px;width:${WinWidth}px`"
        >
          <section
            v-if="active === index"
            class="setion"
            ref="wrapper"
          >
            <div>
              <div>
                <div v-if="JSON.stringify(firstListData) !== '{}'">
                  <first-list
                    :firstListData="firstListData"
                    v-on:listcallback="listClick"
                  ></first-list>
                </div>
                <div class="list_box_item">
                  <list
                    class="list-b"
                    v-for="(item,index) in listarr"
                    :key="index"
                    :item="item"
                    :status="true"
                    v-on:listcallback="listClick"
                  ></list>
                </div>
                <load-more
                  :show-loading="loadStatus"
                  :tip="loadStatusText"
                  v-if="listarr.length>3"
                ></load-more>
              </div>
              <div
                v-if="JSON.stringify(firstListData) === '{}'"
                style="margin-top:30%"
              >
                <no-assessment text="此分类暂无课程"></no-assessment>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <bottomtab></bottomtab>
  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  LoadMore
} from 'vux'
import bottomtab from '@/components/public/tab'
import BScroll from 'better-scroll'
import Swiper from 'swiper'
import list from '@/components/public/list'
import firstList from '@/components/public/firstlist'
import 'swiper/dist/css/swiper.min.css'
import noAssessment from '@/components/public/noassessment'
import {
  info,
  datalist
} from '@/api/information'
export default {
  components: {
    bottomtab,
    Tab,
    TabItem,
    firstList,
    list,
    LoadMore,
    noAssessment
  },
  data () {
    return {
      page: 1,
      active: 0,
      tabArr: [],
      listarr: [],
      firstListData: {},
      WinWidth: '',
      WinHeight: '',
      loadStatus: false,
      loadStatusText: '加载完毕'
    }
  },
  created () {
    this.getTopTab()
  },
  methods: {
    tabIndex (index) {
      this.Swiper.slideTo(index, 300, () => {
        this.slideChangeTransitionStart(index)
      }) // 切换到第一个slide，速度为1秒
    },
    getTopTab () {
      let prams = {
        classification_id: this.$route.query.jump_id ? this.$route.query.jump_id : 0,
        type: this.$route.query.jump_id ? 2 : 1
      }
      info(prams).then(res => {
        if (res.data.code === 200) {
          this.tabArr = res.data.data.classification
          if (this.$route.query.jump_id) {
            this.tabArr.forEach((el, index) => {
              if (el.classification_id == this.$route.query.jump_id) {
                this.active = index
              }
            })
            this.getlist(this.tabArr[0].classification_id)
            this.$nextTick(() => {
              setTimeout(() => {
                this.tabIndex(this.active)
              }, 10)
            })
          } else {
            this.getlist(this.tabArr[0].classification_id)
          }
          this.initSwiper()
        }
      })
    },
    getlist (id) {
      let prams = {
        page: this.page,
        pageshow: 10,
        classification_id: id
      }
      datalist(prams).then(res => {
        this.loading = false
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          if (this.page === 1) {
            this.firstListData = data[0] // 第一条数据
            data.splice(0, 1)
            this.listarr = data
            this.initWrapper()
          } else {
            this.listarr = [...this.listarr, ...data]
          }
          this.page = this.page + 1
        } else {
          if (this.page === 1) {
            this.firstListData = {}
            this.listarr = []
          } else {
            this.loadStatus = false
            this.loadStatusText = '加载完毕'
          }
        }
      })
    },
    slideChangeTransitionStart (activeIndex) {
      this.active = activeIndex
      this.page = 1
      this.getlist(this.tabArr[this.active].classification_id)
    },
    initSwiper () {
      let that = this
      this.Swiper = new Swiper('.swiper-container', {
        autoplay: false,
        observer: true,
        observeParents: true,
        on: {
          slideChangeTransitionStart: function () {
            that.slideChangeTransitionStart(this.activeIndex)
            // console.log(this.activeIndex)
          }
        }
      })
    },
    initWrapper () {
      this.$nextTick(() => {
        let _this = this
        this.scroll = new BScroll(this.$refs.wrapper[0], {
          click: true,
          scrollY: true,
          scrollX: false,
          tap: true,
          bounce: false,
          probeType: 3,
          pullUpLoad: {
            threshold: 10
          }
        })
        this.scroll.on('scroll', function (ob) {
          this.scrollY = ob.y
        })
        this.scroll.on('pullingUp', function () {
          _this.as = false
          _this.loadStatus = true
          _this.getlist(_this.tabArr[_this.active].classification_id) // 传一不更值
          _this.loadStatusText = '加载中'
          _this.scroll.finishPullUp()
          _this.scroll.refresh()
        })
      })
      // 上拉加载
    },
    // 列表点击传出
    listClick (item) {
      // 判断机型
      if (window.__wxjs_is_wkwebview !== true) {
        this.$router.push({
          path: '/coursedetails',
          query: {
            curriculumId: item.curriculum_id,
            title: item.title
          }
        })
      } else {
        window.location.href =
          `/coursedetails?curriculumId=${item.curriculum_id}&title=${item.title}`
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.WinHeight = document.documentElement.clientHeight - 97
      this.WinWidth = document.documentElement.clientWidth
    })
  }
}
</script>

<style>
.swiper-slide {
  overflow: hidden;
}
.postion {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.scroll-marsk {
  z-index: 100000000000;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.info_tab_boxssss {
  width: 100%;
  top: 0;
  left: 0;
  height: 44px;
  overflow: hidden;
}
.fix {
  width: 100%;
  position: fixed;
  bottom: 0;
}
.setion {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.slide {
  width: 100%;
  overflow: hidden;
}
.slide-group {
  display: flex;
}
.item {
  position: relative;
  overflow: hidden;
}
.list_box_item {
  width: 90%;
  margin: 5px 5% 0 5%;
}
.loading {
  position: fixed;
  background-color: #fff;
  z-index: 1000;
  top: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading > div {
  color: #333;
  font-size: 24px;
  background-image: url("https://o6wndwjxn.qnssl.com/fang.gif");
  background-size: cover;
  background-position: 0 -80px;
}
</style>
